<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>王者荣耀官方</title>
    <link rel="stylesheet" th:href="@{/static/index/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/static/index/css/导航样式.css}">
    <link rel="stylesheet" th:href="@{/static/index/css/主页右侧小精灵/小精灵.css}">
    <script th:src="@{/static/index/js/jquery.js}"></script>
    <script th:src="@{/static/index/js/bootstrap.js}"></script>

    <style>
        body {
            background: url(/static/index/img/背景大图片.jpg) no-repeat top center scroll;
        }
        /*导航以下内容 */
        
        #mid_text1 {
            margin-top: 500px;
        }
        
        #mid_text1>div {
            height: 300px;
            margin-bottom: 50px;
        }
        
        #mid_text1 .carousel,
        #mid_text1 .carousel img {
            height: 300px !important;
            width: 100%;
            /* 轮播图的设置 */
        }
        
        #mid_text1 #xw {
            background-color: black;
            background: rgba(0, 0, 0, 0.6);
            color: black;
        }
        /*  页面内容第二部分 */
        
        #mid_text2 {
            margin-top: 25px;
        }
        
        #mid_text2 div {
            /* padding: 50px; */
            margin-bottom: 50px;
            height: 130px;
        }
        
        #mid_text3 {
            margin-top: 25px;
        }
        
        #ul li {
            margin-left: -4px;
            display: inline-block;
            border: 1px solid #008000;
            width: 196px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #FFFFFF;
        }
        
        .b1 {
            display: none;
            border: 1px solid red;
            width: 823px !important;
            height: 330px;
        }
        
        #mid_text3>div {
            height: 400px;
            margin-bottom: 70px;
        }
        
        #mid_text4 {
            margin-top: 25px;
            padding: 0px;
        }
        
        #mid_text4 div {
            margin-bottom: 200px;
            height: 510px;
        }
        
        #mid_text5 {
            background: url(/static/index/img/最后背景.png);
            height: 300px;
        }
        
        #wx {
            background: url(/static/index/img/微信.png) no-repeat;
        }
        
        #wx p {
            font-size: 25px;
            margin-top: 350px;
        }
    </style>
</head>

<body>

    <div id="top" class="container-fluid">
        <!-- logo部分 -->

        <div id="daohang" class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <div class="col-xs-1 col-sm- col-md-1 col-lg-1 col-lg-offset-2" id="logo" style="margin-right: 30px">
                <a href="# "><img th:src="@{/static/index/img/logo.png} " alt=" "></a>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-lg-offset-1">
                <a th:href="@{/html/abouta}" target="_blank">
                    <p> 个人中心<br /><span style="font-size:17px ; color: darkgray;">Personal Information Center</span></p>
                    <!-- 目标文件名center -->
                </a>

            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                <a th:href="@{/atmc/articlea}" target="_blank">
                    <p> 王者社区<br /><span style="font-size:17px ; color: darkgray;">Community activities</span></p>
                    <!-- 链接文件名shequ -->
                </a>

            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                <a th:href="@{/chuyings/saishia/a}" target="_blank">
                    <p> 赛事中心<br /><span style="font-size:17px ; color: darkgray;">Latest event informationr</span></p>
                </a>

            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                <a th:href="@{/chuyings/supermana/b}" target="_blank">
                    <p> 英雄资料<br /><span style="font-size:17px ; color: darkgray;">Hero profiles and abilities</span>
                    </p>
                </a>

            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 " id="sousuo">
                <img th:src="@{/static/index/img/搜索.png}" alt="">
            </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-lg-offset-1" id="logo_box" style="width:50px">
            <a href="login.html">
                <div style="width: 100px; height: 50px;" id="logo_text"  >
                    <img th:src="@{/static/index/img/下载.png }">
                    <p style="width:130px ;">
                        <span style="font-size: larger  ">
                        <span>
                            <a sec:authorize="!isAuthenticated()" href="/toLogin">欢迎登录</a>
                        </span>
                        <span>
                            <a sec:authorize="isAuthenticated()" th:text="${userDetail.username}" href="#">你好!</a>
                        </span>
                        <span>
                            <a  href="/logout">注销</a>
                        </span>
                        </span>
                        <br/>
                        <span style="font-size:14px ; color: darkgray;">登录后查看游戏战绩</span>
                    </p>
                </div>
            </a>
        </div>
    </div>
    </div>
    <div class="container">
        <div id="mid_text1">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators  小圆点-->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    </ol>

                    <!-- Wrapper for slides  轮播图片-->
                    <div class="carousel-inner" role="listbox">
                        <div class="item ">
                            <img th:src="@{/static/index/img/轮播图.jpeg}" alt="">
                            <div class="carousel-caption">

                            </div>
                        </div>
                        <div class="item active">
                            <img th:src="@{/static/index/img/轮播图2.jpeg}" alt="">
                            <div class="carousel-caption">

                            </div>
                        </div>
                        <div class="item">
                            <img th:src="@{/static/index/img/轮播图3.jpeg}" alt="">
                            <div class="carousel-caption">

                            </div>
                        </div>
                        <div class="item">
                            <img th:src="@{/static/index/img/轮播图4.jpeg}" alt="...">
                            <div class="carousel-caption">
                                123456
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="xw">
                <table class="table table-hover">
                    <caption>具体比赛信息</caption>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>

                        </tr>
                    </thead>
                    <tbody>
                    <tr th:each="list:${msg}">
                        <td><img th:src="@{${list.getPath()}}"/><span th:text="${list.getName()}">Tanmay</span></td>
                        <td th:text="${list.city}">Bangalore</td>
                        <td th:text="${list.code}">560001</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <div class="row" style="background: url(/static/index/img/index.png) no-repeat  0px -221px;height: 100px;position: relative; ">
                    <img th:src="@{/static/index/img/shiling.png}" style="position:absolute;right: 0px ;top:0px">
                    <img th:src="@{/static/index/img/fanchenmi.png}" style="position:absolute;right: -23px ;top:68px">
                </div>
                <div class="row" style="background: url(/static/index/img/index.png) no-repeat  0px -347px; height: 100px;"></div>
                <div class="row" style="background: url(/static/index/img/index.png) no-repeat  0px -464px ;height: 100px;"></div>
            </div>

        </div>

        <div id="mid_text2">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background: url(/static/index/img/pics/pic0.jpeg) no-repeat;">
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background: url(/static/index/img/pics/pic1.png) no-repeat;">
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background: url(/static/index/img/pics/pic2.png) no-repeat;">
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background: url(/static/index/img/pics/pic3.jpeg) no-repeat;">
            </div>

        </div>



        <div id="mid_text3">

            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

                <ul id='ul'>
                    <li style="background-color: #FF0000;">精彩集锦</li>
                    <li>赛事操作</li>
                    <li>主播瞎玩</li>
                    <li>线下活动</li>

                </ul>
                <div class="b1" style="display: block;">
                    <img th:src="@{/static/index/img/轮播图5.png}" alt="">
                </div>
                <div class="b1">
                    <img th:src="@{/static/index/img/轮播图6.png}" alt="">
                </div>
                <div class="b1">
                    <img th:src="@{/static/index/img/轮播图7.png}" alt="">
                </div>
                <div class="b1">
                    <img th:src="@{/static/index/img/轮播图5.png}" alt="">
                </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 " id="wx">
                <p> 制作人微信</p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">赛事介绍</div>

        <div id="mid_text4">


            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <img th:src="@{/static/index/img/下背景.png}" alt="">
            </div>


            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <img th:src="@{/static/index/img/下背景2.png}" alt="">
            </div>

        </div>

    </div>
    <div>
        <img src="" alt="">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="mid_text5"><b>制作人:计科2班朱启祥</b><br>仿王者荣耀布局</div>

    </div>

    <div id="xjl">
        <div>
            <img th:src="@{/static/index/img/r_dj.png}" alt="">
        </div>
        <p>登录后查看<br />更多惊喜哦~</p>
    </div>
    <script>
        $(".carousel").carousel({
            interval: 2000
                // 轮播图空隙时间
        })
        lis = document.querySelector('#ul').querySelectorAll('li');
        boxs = document.querySelectorAll('.b1');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute("index", i);
            lis[i].onmouseenter = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = 'white';
                }
                this.style.backgroundColor = "red";
                var index = this.getAttribute('index');
                for (var i = 0; i < lis.length; i++) {
                    boxs[i].style.display = "none";
                }
                boxs[index].style.display = "block";
            }
        }
    </script>
</body>

</html>